<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
			border: 1px solid #ccc;
		}
		.el-tabs {
			background: #fff;
			margin-top: 40px;
			padding-top: 20px;
		}
		.table {
			border: 1px solid #ccc;
		}
		.option {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 20px 14px;
			font-size: 16px;
		}
		.addnew {
			border: 1px solid #333;
			padding: 3px 10px;
			border-radius: 6px;
		}
		.topbox {
			border: 1px solid #ccc;
			padding: 20px 40px;
			background: #fff;
		}
		.shop {
			font-size: 14px;
			display: flex;
			justify-content: space-between;
			margin-top: 15px;
		}
		.leftinfo .title {
			display: flex;
			font-size: 20px;
		}
		.status {
			margin-left: 20px;
		}
		.infoitem {
			display: flex;
			margin-top: 10px;
		}
		.itemname {
			min-width: 100px;
		}
		.itemcontent {
			margin-left: 20px;
		}
		.rightinfo {
			display: flex;
		}
		.jobstatus {
			display: flex;
			align-items: center;
			margin-top: 20px;
		}
		.close {
			margin-right: 30px;
			border: 1px solid #333;
			height: 26px;
			line-height: 26px;
			padding: 0 30px;
			border-radius: 4px;
		}
		.select {
			display: flex;
			justify-content: flex-end;
			margin-bottom: 20px;
		}
		.el-tabs__header {
			padding: 0 20px;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}
		.pagetitle {
			font-size: 20px;
			color: #409EFF;
			padding-bottom: 10px;
			margin-bottom: 20px;
			border-bottom: 1px solid #ccc;
			display: flex;
			justify-content: space-between;
		}



		ol.steps::-webkit-scrollbar { /* chrome 隐藏滚动条*/
			display: none;
		}
		ol.steps{
			list-style: none;
			display: flex;
			overflow-x: auto;
			height: 64px;

		}
		ol.steps:after,ol.steps li:after{
			content: '';
			display: block;
			clear: both;
		}
		ol.steps li{
			float: left;
			flex: 1;
			position: relative;
			min-width: 100px;
		}
		ol.steps li.step-active .circle {
			width: 20px;
			height: 20px;
			position: absolute;
			border-radius: 50%;
			background-color: #F56C6C;
			top: 5px;
			left: 53px;

		}
		ol.steps li .step-line{
			height: 3px;
			background-color: #F56C6C;
			box-shadow: inset 0 1px 1px #F56C6C;
			margin-top: 15px;
		}
		ol.steps .step-content{
			position: absolute;
			top: 25px;
			left:15px ;
			text-align: center;
			color:#F56C6C;
			width: 100px;
		}
		ol.steps li.step-end{
			width: 120px!important;
			flex: inherit;
		}
		ol.steps li.step-end .step-line{
			display: none;
		}
		.dataSteps{
			position: relative;
		}
		.division{
			background-color: #ff9191;
			height: 62px;
			width: 3px;
			position: absolute;
			right: 0;
			top: 18px;
			box-shadow: inset 0 1px 1px #ff9191;
		}
		.arrowLeft{
			width: 0;
			height: 0;
			border: 8px solid;
			border-color: transparent #F56C6C transparent transparent;
			position: absolute;
			top: 73px;
			left: -10px;
		}
	</style>
</block>
<block name="content">
	<div class="topbox">
		<div class="pagetitle"><span>活动详情</span><el-button size="small" type="danger" icon="el-icon-delete" @click="deleteActivity">删除</el-button></div>
		<div class="dataSteps">


			<ol class="steps">
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div>未下单</div>
					</div>

				</li>
				<li class="step-active">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div>待审核</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">未通过</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">已通过</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">待报价</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">待确定报价</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">待接收任务</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">已接受</div>
					</div>
				</li>
			</ol>
			<span class="division"></span>
			<ol class="steps">
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div>完成</div>
					</div>

				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div>下画待验收</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">下画进行中</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">待下画</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">上画待验收</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">上画进行中</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">待上画</div>
					</div>
				</li>
				<li class="step">
					<div class="circle"></div>
					<div class="step-line"></div>
					<div class="step-content">
						<div class="step-text">生产完成</div>
					</div>
				</li>
			</ol>
			<span class="arrowLeft"></span>
		</div>
		<div class="shop">
			<div class="leftinfo">
				<div class="title">
					<div class="shopname">活动名称</div>
					<div class="status">{$data['name']}</div>
				</div>
				<div class="infoitem">
					<div class="itemname">审核员：</div>
					<div class="itemcontent">{$data['audit_name']}（{$data['audit_mobile']}）</div>
				</div>
				<div class="infoitem">
					<div class="itemname">项目负责人：</div>
					<div class="itemcontent">?（?）</div>
				</div>
			</div>
			<div class="middleinfo">
				<div class="infoitem">
					<div class="itemname">活动时间：</div>
					<div class="itemcontent">{:date('Y-m-d', $data['activity_start_time'])}~{:date('Y-m-d', $data['activity_end_time'])}</div>
				</div>
				<div class="infoitem">
					<div class="itemname">下单截止时间：</div>
					<div class="itemcontent">{:date('Y-m-d', $data['order_end_time'])}</div>
				</div>
				<div class="infoitem">
					<div class="itemname">上画时间：</div>
					<div class="itemcontent">{:date('Y-m-d', $data['up_start_time'])}~{:date('Y-m-d', $data['up_end_time'])}</div>
				</div>
				<div class="infoitem">
					<div class="itemname">实际/预期店铺：</div>
					<div class="itemcontent">{$data['store_count']}/{$data['all_store_count']}</div>
				</div>
			</div>
			<div class="rightinfo">
				<div class="edit">
					<div>活动状态：</div>
					<if condition="$data['status'] eq '1'">
						<div class="jobstatus">显示</div>
					<else/>
						<div class="jobstatus">隐藏</div>
					</if>
				</div>
			</div>
			<div class="close">导出活动详情</div>
		</div>
	</div>
	<el-tabs v-model="activeTab" type="card">
		<el-tab-pane label="详细订单" name="totalorder">
			<div class="select">
				<el-select size="small" @change="changeParam" v-model="param.search_order_status">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
				<div class="searchbox">
					<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeParam" v-model="param.key">
						<i slot="suffix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
			</div>
			<div class="table">
				<el-table :data="tableData" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}" ><!-- -->
					<el-table-column prop="order_no" label="订单编号"></el-table-column>
					<el-table-column prop="store_name" label="公司简称"></el-table-column>
					<el-table-column prop="audit_name" label="审核员"></el-table-column>
					<el-table-column prop="activity_name" label="活动名称"></el-table-column>
					<el-table-column prop="manager_name" label="客戶"></el-table-column>
					<el-table-column prop="order_status" label="状态">
						<template slot-scope="scope">
							<span v-if="scope.row.order_status == '0'">待店长下单</span>
							<span v-if="scope.row.order_status == '1'">待审核</span>
							<span v-if="scope.row.order_status == '2'">审核未通过</span>
							<span v-if="scope.row.order_status == '3'">进行中</span>
							<span v-if="scope.row.order_status == '4'">上画待验收</span>
							<span v-if="scope.row.order_status == '5'">上画验收完成</span>
							<span v-if="scope.row.order_status == '6'">下画待验收</span>
							<span v-if="scope.row.order_status == '7'">订单完成</span>
							<span v-if="scope.row.order_status == '11'">高空物料待报价</span>
							<span v-if="scope.row.order_status == '12'">高空物料报价待审核</span>
							<span v-if="scope.row.order_status == '13'">高空报价审核失败</span>
						</template>
					</el-table-column>
					<el-table-column prop="charger" label="项目负责人"></el-table-column>
					<el-table-column prop="partner_name" label="城市合伙人"></el-table-column>
					<el-table-column prop="option" label="操作">
						<template slot-scope="scope">
							<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toDetail(scope.row.order_no)">查看</span>
							<span style="background: red;color: #fff;padding:4px 10px;border-radius: 3px;" @click="deleteThis(scope.row.id)">删除</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
							   @current-change="handleCurrentChange" :page-size="param.size" :total="total"></el-pagination>
			</div>
		</el-tab-pane>
	</el-tabs>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    activeTab: "totalorder",
                    status: "",
                    searchrecord: "",
                    orderstatus: "订单状态",
                    orderList: [
                        {
                            orderno: "20190412251",
                            company: "慕斯（深圳）",
                            checker: "吴映洁",
                            project: "圣诞促销",
                            client: "欧洲城店",
                            status: "待接受",
                            charger: "张先生",
                            partner: "李先生",
                            operate: "查看"
                        },
                        {
                            orderno: "20190412251",
                            company: "慕斯（深圳）",
                            checker: "吴映洁",
                            project: "圣诞促销",
                            client: "欧洲城店",
                            status: "待接受",
                            charger: "张先生",
                            partner: "李先生",
                            operate: "查看"
                        },
                        {
                            orderno: "20190412251",
                            company: "慕斯（深圳）",
                            checker: "吴映洁",
                            project: "圣诞促销",
                            client: "欧洲城店",
                            status: "待接受",
                            charger: "张先生",
                            partner: "李先生",
                            operate: "查看"
                        },
                        {
                            orderno: "20190412251",
                            company: "慕斯（深圳）",
                            checker: "吴映洁",
                            project: "圣诞促销",
                            client: "欧洲城店",
                            status: "待接受",
                            charger: "张先生",
                            partner: "李先生",
                            operate: "查看"
                        },
                        {
                            orderno: "20190412251",
                            company: "慕斯（深圳）",
                            checker: "吴映洁",
                            project: "圣诞促销",
                            client: "欧洲城店",
                            status: "待接受",
                            charger: "张先生",
                            partner: "李先生",
                            operate: "查看"
                        }
                    ],
                    options: [
                        {
                            value: '0',
                            label: '待店长下单'
                        }, {
                            value: '1',
                            label: '待审核'
                        }, {
                            value: '2',
                            label: '审核未通过'
                        }, {
                            value: '3',
                            label: '进行中'
                        }, {
                            value: '4',
                            label: '上画待验收'
                        }, {
                            value: '5',
                            label: '上画验收完成'
                        }, {
                            value: '6',
                            label: '下画待验收'
                        }, {
                            value: '7',
                            label: '订单完成'
                        }, {
                            value: '11',
                            label: '高空物料待报价'
                        }, {
                            value: '12',
                            label: '高空物料报价待审核'
                        }, {
                            value: '13',
                            label: '高空报价审核失败'
                        }
                    ],

                    tableData: [],
                    param: {
                        search_order_status: '',
                        order_status: '0,1,2,3,4,5,6,7,11,12,13',
                        activity_id: '{$id}',
                        key: '',
                        page: 1,
                        size: 10
                    },
                    total: 0,
                }
            },
            created: function () {
                this.getData();
            },
            methods: {
                getData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Order/getData', _this.param, function (data) {
                        if(data.status){
                            _this.total = parseInt(data.data.count);
                            _this.tableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleSizeChange: function (size) {
                    this.param.size = size;
                    this.getData();
                },
                handleCurrentChange: function (page) {
                    this.param.page = page;
                    this.getData();
                },
                changeParam: function () {
                    this.param.page = 1;
                    this.getData();
                },


                toDetail(order_no) {
                    window.location.href = HOME_URL + "/orderAdmin/Order/detail?order_no=" + order_no;
                },
                deleteActivity() {
                    this.$confirm('确定删除此活动?', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var _this = this;
                        $.post(HOME_URL + '/orderAdmin/Activity/delete', {'id': _this.param.activity_id}, function (data) {
                            if(data.status){
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                setTimeout(function () {
									location.href = HOME_URL + "/orderAdmin/Audit/project";
                                })
                            }else{
                                _this.$message.error(data.msg);
                            }
                        }, 'json');

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                deleteThis(id) {
                    this.$confirm('确定删除此物料订单?', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var _this = this;
                        $.post(HOME_URL + '/orderAdmin/Order/delete', {'id': id}, function (data) {
                            if(data.status){
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                _this.getData();
                            }else{
                                _this.$message.error(data.msg);
                            }
                        }, 'json');
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            }
        });
	</script>
</block>